<template>
  <el-alert class="mb8" :title="title" type="warning"/>
  <!-- <image-upload @update:model-value="getImgUrl" :modelValue="fileList" class="mb8" /> -->
  <el-upload
  ref="uploadRef"
  v-model:file-list="fileList"
  action="uploadUrl"
  :auto-upload="false"
  :data="data"
  :disabled="formLoading"
  :limit="limit"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-change="handleFileChange"
  :on-error="submitFormError"
  :on-success="submitFormSuccess"
  :on-exceed="handleExceed"
  :http-request="httpRequest"
  accept=".jpg, .png, .gif"
  style="margin-top:8px"
  v-hasPermi="['farm:image:create','farm:image:query']"
  v-loading="honorLoading"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible" style="background-color:transparent;box-shadow:0 0 0 0">
    <img
      w-full :src="dialogImageUrl" alt="Preview Image"
      width="100%" 
      style="display: block; margin: 0 auto;background-color: transparent;"
    />
  </el-dialog>

  <el-tag type="primary">请上传 大小不超过 20MB 的文件</el-tag>

</template>

<script setup lang="ts">
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile,UploadFile } from 'element-plus'
import * as FileApi from '@/api/infra/file'
import {EnterpriseApi} from '@/api/farm/enterprise'
import { ref } from 'vue'
import { log } from 'console'
import { url } from 'inspector'
import { el } from 'element-plus/es/locale'

const title =ref<String>('支持一张图片上传,请上传16:9或者4:3的图片')
const limit =ref<number>(5)
const message = useMessage() // 消息弹窗
const fileList = ref<UploadUserFile[]>([]);
const formLoading = ref(false) // 表单加载
const data = ref({ path: '' })
const type = ref('honor')
const uploadRef = ref()
const imageUrls = ref<string[]>([])//存储上传的图片 URL
const honorData = reactive<{id:null | number,urls:string[],type:string}>({
  id:null,
  urls:[],
  type:''
})

const honorLoading =ref<boolean>(false)//上传状态
const { uploadUrl, httpRequest } = useUpload()
const { t } = useI18n() // 国际化
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const loading = ref(false) // 列加载中


const honorList = ref([]); // 荣誉列表

const getList =()=>{
  const params = { type: 'honor' };
   EnterpriseApi.getHonorList(params).then((res:any) => {
    // 1.如果页面初始有数据,存储数据
    honorData.id =res.id;//存储现有的id
    honorData.urls = res.urls;//存储现有的url
    honorData.type = res.type;//存储现有的type

    //2. 对接口获取到的url进行转化
    const existingFiles = res.urls.map((url:string)=>({
      name:url.split('/').pop() || 'unknow',//对地址名称进行截取处理，获取文件名
      url:url
    }));

    // 3.更新fileList
    fileList.value.push(...existingFiles)
    imageUrls.value.push(...existingFiles.map(file => file.url)); // 初始化 imageUrls
    console.log(imageUrls.value,'imageUrls.value');
    
  }).catch(error => {//失败处理
    console.log(error,'error');
  });
}

// 处理上传的文件
const handleFileChange = (file:UploadUserFile) =>{
  // console.log(file,'file');
  honorLoading.value =true;
  data.value.path = file.name;//获取图片名称
  unref(uploadRef)?.submit()

  // 检查文件大小
  if (file.size > 20 * 1024 * 1024) { // 20MB
    message.error('文件大小不能超过 20MB');
    fileList.value.pop(); // 移除超大的文件
    return;
  }
}

// 处理文件删除
const handleRemove = (uploadFile: UploadUserFile) => {
  // 从 fileList 中移除该文件
  fileList.value = fileList.value.filter(file => file.url !== uploadFile.url);
  console.log(fileList.value, 'fileList.value移除');
  
  // 从 imageUrls 中移除被删除的文件 URL
  imageUrls.value = imageUrls.value.filter(url => url !== uploadFile.url);
  console.log('Updated imageUrls:', imageUrls.value);

  // 准备提交数据
  let dataToSubmit: {id?: number | null, urls: string[], type: string | undefined};

  // 始终包括 honorData 的 id，如果没有图片则只发送 id 和 type
  if (imageUrls.value.length > 0) {
    // 如果还有图片，发送这些图片的 URLs
    dataToSubmit = {
      id: honorData.id,
      urls: [...imageUrls.value], // 合并已有图片和新上传的图片
      type: honorData.type,
    };
  } else {
    // 如果没有图片，仍然发送 id
    dataToSubmit = {
      id: honorData.id,
      urls: [], // 可能根据业务逻辑需要这里留空或发送特定数据
      type: honorData.type,
    };
  }

  console.log(dataToSubmit, 'dataToSubmit');

  EnterpriseApi.postHonorArray(dataToSubmit).then(res => {
    // 提交成功后清空 imageUrls 数组
    imageUrls.value = [];
    fileList.value = []; // 如果需要，也可以清空上传列表
    message.warning('移除成功')
    getList(); // 刷新列表
  }).catch((error) => {
    console.log(error, 'datatosubmitError');
  });
};

// 处理文件预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true // 显示预览对话框
}

// 文件上传成功处理
const submitFormSuccess =(response:any,file:UploadUserFile)=>{
  const uploadedFile={
    name:file.name,
    url:response.data,
  }
  imageUrls.value.push(uploadedFile.url);//添加上传的图片url列表中
  honorLoading.value =false;
  submitFileForm()
}

// 上传失败提示
const submitFormError = ():void=>{
  honorLoading.value =false;
  message.error('上传失败，请您重新上传')
  if(imageUrls.value.length ===0){
    return 
  }
}
/** 文件数超出提示 */
const handleExceed = (): void => {
  if(limit.value === limit.value){
    message.error('请删除存在的图片后在上传'+','+'最多只能上传'+limit.value+'个图片!')
  }else{
    message.error('最多只能上传'+limit.value+'个图片!')
  }

}

// 提交图片
const submitFileForm =()=>{
  let dataToSubmit:{id?:number|null,urls:string[],type:string | undefined}
  //1.提交图片时，进行判断
  if(honorData.urls.length>0){
    // 2.存在图片，包含id和urls
    dataToSubmit ={
      id:honorData.id,
      urls:[...imageUrls.value],// 合并已有图片和新上传的图片
      type:honorData.type,
    };
  }else{
    // 3.不存在已有图片时，只发送新上传的图片
    dataToSubmit = {
      id:honorData.id,
      urls: [...imageUrls.value],
      type: 'honor',
    };
  }
  //  console.log(dataToSubmit,'dataToSubmit');

  EnterpriseApi.postHonorArray(dataToSubmit).then(res=>{
    console.log(res);
    // 提交成功后清空 imageUrls 数组
    imageUrls.value = [];
    fileList.value = []; // 如果需要，也可以清空上传列表
    message.success('上传成功')
    honorLoading.value =false;
    getList()
  }).catch((error)=>{
    console.log(error,'datatosubmitError');
  })
}


/** 初始化 **/
onMounted(() => {
  getList(); // 调用时传递具体的 type 值
})

</script>
<style scoped lang="scss">
  .uploadBtn{
    margin-top: 20px;
  }
  .el-upload__file {
  max-width: 100%; // 限制每个文件的最大宽度
  max-height: 100px; // 限制每个文件的最大高度
  overflow: hidden; // 隐藏溢出
  text-overflow: ellipsis; // 超出文本显示省略号
  white-space: nowrap; // 不换行
}
</style>

